<template>
  <div>loading...</div>
</template>
<script>
import { getToken } from '@/utils/auth'
import settings from '@/settings'
import { requestPost } from '@/api/system/common'
export default {
  name: 'Index',
  data() {
    return {
      numeral: 0,
      screenWidth: document.body.clientWidth,
      isGuest: false,
      pt: 0,
      timer: null
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.pt = route.query && route.query.pt
      },
      immediate: true
    },
    screenWidth: {
      handler(newName, old) {
        if (getToken()) {
          this.isGuest = false
        } else {
          this.isGuest = true
        }
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          this.screenWidth = newName
          this.timer = true
          const that = this
          setTimeout(function() {
            that.sjCount(that.screenWidth)// 窗口大小变化后执行的方法
            that.timer = false
          }, 10)
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  created() {
    // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem('store'))
        )
      )
    }
    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    // beforeunload事件在页面刷新时先触发
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
    this.initTheme()
    this.userVital()
  },
  mounted() {
    window.onresize = () => (() => {
      window.screenWidth = document.body.clientWidth
      this.screenWidth = window.screenWidth
    })()
  },
  methods: {
    sjCount(screeWidth) {
      if (screeWidth >= 1920) {
        this.numeral = 1 // 用于判断用户浏览器界面大小
      } else if (screeWidth >= 1680) {
        this.numeral = 1
      } else if (screeWidth >= 1600) {
        this.numeral = 1
      } else if (screeWidth >= 1280) {
        this.numeral = 1
      } else if (screeWidth >= 1024) {
        this.numeral = 1
      } else {
        this.numeral = 2
      }
      if (getToken() && (this.numeral === 1 || this.numeral === '1')) {
        this.$router.push({ path: '/uc/index' })
      } else if (getToken() && (this.numeral === 2 || this.numeral === '2')) {
        this.$router.push({ path: '/uc/mobile' })
      } else if ((this.numeral === 2 && this.isGuest === true) || (settings.isGuest === false && this.isGuest === true)) {
        window.open('/login?numeral=' + this.numeral + '&pt=' + this.pt, '_self')
      }
    },
    initTheme() {
      this.$store.dispatch('GetThemes').then((res) => {
        this.timer = setTimeout(this.initTheme, 60 * 1000)
      }).catch((error) => {
        console.log(error)
      })
    },
    userVital() {
      requestPost('rest/config/api/system/vital', {}).then(() => {
        console.log('记录成功！')
      })
    }
  }
}
</script>

<style scoped>

</style>
